<template>
  <a-modal
    :title="'Excel批量导入'"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false">
          <a-input v-decorator="['id']" name="id" />
        </a-form-item>
        <a-form-item label="Excel文件">
          <a-upload
            v-decorator="['file']"
            :multiple="false"
            :file-list="fileList"
            :accept="'.xlsx, .xls'"
            :remove="handleRemove"
            :before-upload="beforeUpload"
          >
            <a-button> <a-icon type="upload" /> 请选择Excel文件 </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item label="供应商">
          <a-select v-decorator="['supplyId']" placeholder="请选择" >
            <a-select-option :value="i.id" v-for="i in this.suppliesOption" :key="i.value">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="采购渠道">
          <a-select v-decorator="['channelId']" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in this.channelOption" :key="i.value">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="商品名">
          <a-radio-group v-decorator="['product', { initialValue: 1 }]" placeholder="请选择">
            <a-radio :style="radioStyle" :value="1">不自动新增商品名</a-radio>
            <a-radio :style="radioStyle" :value="2">自动新增商品名(谨慎使用)</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="入库日期">
          <a-date-picker v-decorator="['orderDate',]" valueFormat="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item label="二次入库">
          <a-radio-group v-decorator="['second', { initialValue: 0}]" placeholder="请选择">
            <a-radio :style="radioStyle" :value="0">不允许二次入库</a-radio>
            <a-radio :style="radioStyle" :value="1">允许二次入库</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
  
  <script>
  import { getSuppliesListUsingPOST, } from '@/api/api/jingxiaoshangyunyingshangguanli.ts'
  import { getChannelListUsingPOST} from '@/api/api/caigouguanli.ts'
  import pick from 'lodash.pick'
  // 表单字段
  const fields = ['file','supplyId','channelId','product','second','orderDate', 'id']
  
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data () {
      this.formLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13 }
        }
      }
      return {
      fileList:[],
      suppliesOption:[],
      channelOption:[],
      radioStyle:{
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      headers: {
        authorization: 'authorization-text',
      },
   
        form: this.$form.createForm(this)
      }
    },
    created () {
      
      this.handleSupplies()
      this.handleChannel()
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
  
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        this.model && this.form.setFieldsValue(pick(this.model, fields))
      })
    },
    methods:{
      handleChannel(){
        getChannelListUsingPOST(this.queryParam).then((res) => {
          this.channelOption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
      },
      handleSupplies(){
        getSuppliesListUsingPOST(this.queryParam).then((res) => {
          this.suppliesOption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
      },

      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false
      },
      handleRemove(file) {
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      }
    }
  }
  </script>